<template>
  <div class="cart_item">
    <div class="cart_column column_1">
      <el-checkbox class="my_el_checkbox" v-model="cart.is_selected"></el-checkbox>
    </div>
    <div class="cart_column column_2">
      <img :src="cart.course_img" alt="">
      <span><router-link :to="`/course/${cart.id}`">{{cart.name}}</router-link></span>
    </div>
    <div class="cart_column column_3">
      <el-select v-model="expire" size="mini" placeholder="请选择购买有效期" class="my_el_select">
        <el-option v-for="item in cart.expire_list" :label="item.expire_text" :value="item.expire_time"
                   :key="item.expire_time"></el-option>
      </el-select>
    </div>
    <div class="cart_column column_4">¥{{cart.price}}</div>
    <el-button type="danger" round @click="deleteHandler">删除</el-button>
  </div>
</template>

<script>
    export default {
        name: "CartItem",
        data() {
            return {
                checked: false,
                expire: 0,
                token: "",
            }
        },
        // 调用父组件传过来的值
        props: [
            'cart',
        ],
        watch: {
            'cart.is_selected': function (value) {
                this.selectedChange();
                // 告诉父组件需要计算总价格
                this.$emit('changeprice');
            },
            'expire': function (value) {
                let self = this;
                this.cart.expire_list.forEach((item, key) => {
                    if (item.expire_time === value) {
                        self.cart.price = item.price;

                        // 调整有效期的时候发给后端保存在redis
                        this.$axios.put(`${this.$settings.Host}/cart/course/put/`, {
                            course_id: this.cart.id,
                            expire: item.expire_time,
                        }, {
                            headers: {
                                'Authorization': 'jwt ' + this.token
                            }
                        }).then(response => {
                            console.log(response.data)
                        }).catch(error => {
                            console.log(error.response)
                        })
                    }
                });
                // 告诉父组件需要计算总价格
                this.$emit('changeprice');
            }
        },
        created() {
            this.check_login();
        },
        methods: {
            check_login() {
                // 检查用户是否登录了
                this.token = localStorage.user_token || sessionStorage.user_token;
                if (!this.token) {
                    // 没有登录跳转至登录页面
                    this.$confirm('您尚未登录，请登录后进行操作', '提示', {
                        type: 'error'
                    }).then(() => {
                        this.$router.push('/user/login');
                    });
                    return false;
                }
            },
            selectedChange() {
                let course_id = this.cart.id;
                let is_selected = this.cart.is_selected;
                // 向后端发送请求，更改勾选状态
                this.$axios.patch(`${this.$settings.Host}/cart/course/patch/`, {
                    course_id,
                    is_selected: Boolean(is_selected),
                }, {
                    headers: {
                        'Authorization': 'jwt ' + this.token
                    }
                }).then(response => {
                    this.$message({
                        message: response.data.message,
                        type: 'success'
                    })
                }).catch(error => {
                    console.log(error.response)
                })

            },
            deleteHandler() {
                // 删除商品
                // 向后端发送删除购物车中商品的请求
                this.$axios.delete(`${this.$settings.Host}/cart/course/delete/`, {
                    params: {
                        course_id: this.cart.id
                    },
                    headers: {
                        'Authorization': 'jwt ' + this.token
                    }
                }).then(response => {
                    this.$message({
                        message: response.data.message,
                        type: 'success'
                    });
                    // 删除商品成功后，告诉父组件，将该子组件删除掉
                    this.$emit('delete', this.cart.id);
                }).catch(error => {
                    console.log(error.response)
                });
            }
        }
    }
</script>

<style scoped>
  .cart_item::after {
    content: "";
    display: block;
    clear: both;
  }

  .cart_column {
    float: left;
    height: 250px;
  }

  .cart_item .column_1 {
    width: 88px;
    position: relative;
  }

  .my_el_checkbox {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    top: 0;
    margin: auto;
    width: 16px;
    height: 16px;
  }

  .cart_item .column_2 {
    padding: 67px 10px;
    width: 520px;
    height: 116px;
  }

  .cart_item .column_2 img {
    width: 175px;
    height: 115px;
    margin-right: 35px;
    vertical-align: middle;
  }

  .cart_item .column_3 {
    width: 197px;
    position: relative;
    padding-left: 10px;
  }

  .my_el_select {
    width: 117px;
    height: 28px;
    position: absolute;
    top: 0;
    bottom: 0;
    margin: auto;
  }

  .cart_item .column_4 {
    padding: 67px 10px;
    height: 116px;
    width: 142px;
    line-height: 116px;
  }

  .el-button.is-round{
    margin-top: 105px;
  }


</style>
